<template>
  <div class="data-source-table">
    <div class="table-header">
      <a-space>
        <a-select
          v-model:value="filters.db_type"
          placeholder="数据库类型"
          style="width: 150px"
          allowClear
          @change="handleFilterChange"
        >
          <a-select-option value="mysql">MySQL</a-select-option>
          <a-select-option value="postgresql">PostgreSQL</a-select-option>
        </a-select>
        <a-button type="primary" @click="loadDataSources">
          <template #icon><SearchOutlined /></template>
          查询
        </a-button>
      </a-space>
    </div>

    <a-table
      :columns="tableColumns"
      :data-source="dataSources"
      :loading="loading"
      :pagination="pagination"
      row-key="id"
      @change="handlePaginationChange"
      :scroll="{ x: 1200 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'db_type'">
          <a-tag :color="record.db_type === 'mysql' ? 'blue' : 'green'">
            {{ record.db_type.toUpperCase() }}
          </a-tag>
        </template>
        <template v-if="column.key === 'is_connected'">
          <a-badge :status="record.is_connected ? 'success' : 'error'" />
          {{ record.is_connected ? '已连接' : '未连接' }}
        </template>
        <template v-if="column.key === 'last_test_time'">
          {{ formatDateTime(record.last_test_time) }}
        </template>
        <template v-if="column.key === 'created_at'">
          {{ formatDateTime(record.created_at) }}
        </template>
        <template v-if="column.key === 'actions'">
          <a-space>
            <a-button size="small" @click="handleTestConnection(record)">
              测试连接
            </a-button>
            <a-button size="small" @click="handleViewTables(record)">
              查看表
            </a-button>
            <a-button size="small" type="primary" @click="handleCreateSyncTask(record)">
              创建同步任务
            </a-button>
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="handleEditDataSource(record)">
                    编辑
                  </a-menu-item>
                  <a-menu-item @click="handleDeleteDataSource(record)" danger>
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button size="small">
                更多 <DownOutlined />
              </a-button>
            </a-dropdown>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { SearchOutlined, DownOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
import { useSyncUtils } from '@/composables/useSyncData'

const props = defineProps({
  dataSources: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    required: true
  },
  filters: {
    type: Object,
    required: true
  }
})

const emit = defineEmits([
  'load-data-sources',
  'test-connection',
  'view-tables',
  'create-sync-task',
  'edit-data-source',
  'delete-data-source',
  'pagination-change',
  'filter-change'
])

const { formatDateTime } = useSyncUtils()

// 优化的表格列配置
const tableColumns = computed(() => [
  {
    title: '数据源名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    fixed: 'left'
  },
  {
    title: '数据库类型',
    dataIndex: 'db_type',
    key: 'db_type',
    width: 120
  },
  {
    title: '主机地址',
    dataIndex: 'host',
    key: 'host',
    width: 150
  },
  {
    title: '数据库',
    dataIndex: 'database_name',
    key: 'database_name',
    width: 120
  },
  {
    title: '连接状态',
    dataIndex: 'is_connected',
    key: 'is_connected',
    width: 100,
    filters: [
      { text: '已连接', value: true },
      { text: '未连接', value: false }
    ]
  },
  {
    title: '最后测试时间',
    dataIndex: 'last_test_time',
    key: 'last_test_time',
    width: 150,
    sorter: true
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 150,
    sorter: true
  },
  {
    title: '操作',
    key: 'actions',
    width: 350,
    fixed: 'right'
  }
])

// 事件处理函数
const loadDataSources = () => emit('load-data-sources')

const handleTestConnection = (dataSource) => emit('test-connection', dataSource.id)

const handleViewTables = (dataSource) => emit('view-tables', dataSource)

const handleCreateSyncTask = (dataSource) => {
  emit('create-sync-task', dataSource)
}

const handleEditDataSource = (dataSource) => emit('edit-data-source', dataSource)

const handleDeleteDataSource = (dataSource) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除数据源"${dataSource.name}"吗？此操作不可恢复。`,
    okText: '确认',
    cancelText: '取消',
    onOk: () => emit('delete-data-source', dataSource.id)
  })
}

const handlePaginationChange = (pagination, filters, sorter) => {
  emit('pagination-change', pagination)
}

const handleFilterChange = () => emit('filter-change')
</script>

<style scoped>
.data-source-table {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.table-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
  background: #f5f5f5;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
}

:deep(.ant-btn-sm) {
  font-size: 12px;
}

:deep(.ant-dropdown-trigger) {
  display: flex;
  align-items: center;
}
</style>